<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('课程表')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="container-div">
        <div class="col-sm-12 search-collapse">
            <input type="hidden" name="day" id="day" th:value="${day}"/>
            <ul>

                    <p style="width: 80px">时间周期：</p>
                    <div class="form-control-static" id="cycle" th:text="${cycle}" style="color: #602fff"></div>

            </ul>
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li id="clazzLi">
                            <p style="width: 80px">班级：</p>
                            <select name="clazzId" id="clazzId" required>
                                <option th:each="clazz:${clazzs}" th:value="${clazz.clazzId}"
                                        th:text="${clazz.clazzName}"></option>
                            </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchDays(-1)"><i
                                    class="fa fa-search"></i>&nbsp;上一周</a>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchDays(0)"><i
                                    class="fa fa-search"></i>&nbsp;本周</a>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchDays(1)"><i
                                    class="fa fa-search"></i>&nbsp;下一周</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

    </div>
    <input type="hidden" th:value="${data}" id="data">
    <input type="hidden" th:value="${dictLabel}" id="dictLabel">

    <ul>
        <div id="course_card"></div>
    </ul>
</div>
<th:block th:include="include :: footer" />
<script type="text/javascript">
    $(function () {
        var data = $('#data').val();
        var dictLabel = $('#dictLabel').val();
        viewData(data, dictLabel);
        <!-- laydate示例 -->
        layui.use('laydate', function() {
            var laydate = layui.laydate;

            laydate.render({
                elem: '#month',
                type: 'month'
            });
        });

    });

function viewData(data, dictLabel) {
    var arr = JSON.parse(data);

    var arr1 = [
        ["", "星期一", "星期二", "星期三", "星期四", "星期五"]
    ];

    var arr2 = JSON.parse(dictLabel);
    for (var i = 1; i <= arr2.length; i++) {
        arr1.push(["第" + i + "节(" + arr2[i - 1] + ")"]);
        for (var j = 0; j < 5; j++) {
            arr1[arr1.length - 1].push(" ");
        }
    } //构建了一个课程表数组

    for (var i = 0; i < arr.length; i++) {
        var name = arr[i][0];
        var week = arr[i][1];
        var start = arr[i][2];
        var startNum = arr[i][3];
        for (var j = 0; j < startNum; j++) {
            if (j == 0) {
                arr1[start + j][week] = {
                    content: name,
                    rowspan: startNum
                }
            } else {
                arr1[start + j][week] = null;
            }
        }
    } //渲染虚拟table

    var str = "";
    str += "<table align='center' border cellpadding='2 8 2 8' width='80%'>";
    for (var i = 0; i < arr1.length; i++) {
        if (i == 1) {
            str += "<tr align = center><td></td><td colspan = 5 color = red><font color = 'red'><b>上午</b></font></td></tr>";
        } else if (i == 5) {
            str += "<tr align = center><td></td><td colspan = 6 color = red><font color = 'red'><b>下午</b></font></td></tr>";
        }
        str += "<tr align = center >"

        for (var j = 0; j < arr1[i].length; j++) {
            if (arr1[i][j] == null) {

            } else if ((typeof arr1[i][j]) == "string") {
                str += "<td ><font color = 'blue'><b>" + arr1[i][j] + "</b></font></td>";
            } else {
                str += "<td rowspan=" + arr1[i][j].rowspan + ">" + arr1[i][j].content + "</td>"
            }
        }
        str += "</tr>"

    }
    str += "</table>";
    document.getElementById("course_card").innerHTML = str;
}


function searchDays(num) {
    var day = $('#day').val();
    var clazzId = $("#clazzId option:selected").val();
    $.ajax({
        type: "get",
        url: ctx + "mgr/arrange/searchDays?day=" + day + "&num=" + num + "&clazzId=" + clazzId,
        success: function(r) {
            $('#day').val(r.data.day);
            $('#cycle').text(r.data.cycle);
            viewData(r.data.data, r.data.dictLabel);
        }
    })

}
</script>
</body>
<style>
    td, th {
        padding: 10px;
    }
</style>
</html>